<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="btn1">浅复制节点</button>
  <button id="btn2">深复制节点</button>
  <ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
  </ul>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function () {
      // 复制节点 clone
      $('#btn1').click(function () {
        // 1.浅复制一个元素 传入false
        var $li = $('li:first').clone(false)
        // 2.将复制的元素添加到ul中
        $('ul').append($li)
      })
      $('#btn2').click(function () {
        // 1.深复制一个元素 传入true
        var $li = $('li:first').clone(true)
        // 2.将复制的元素添加到ul中
        $('ul').append($li)
      })
      // 浅复制只会复制元素 深复制含义是复制元素的同时复制元素中所绑定的事件
      $('li').click(function () {
        alert($(this).html())
      })
    })
    

  </script>
</body>
</html>